<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Store online</title>
<script type="text/javascript" src="/static/script/ajax.js"></script>
<style>
.td_tip{
white-space:nowrap;}

#table_datalist div{
border:solid 1px #999999;
border-left: solid 3px #999999;
margin-bottom: 15px;
padding: 5px 5px 5px 5px;
}
#table_datalist sub{
color:#999999}
#progress{
display:inline;}
#progress img{
margin-right: 1px;
}
</style>


</head>

<body>
<p>Sometimes you just want to note down some words in some places, where you can access it anywhere else.</p>
<p>Input the word you want to save in below textbox and click the button to save.</p>

<textarea name="words" id="textarea_words" cols="45" rows="5" disabled="disabled">Loading...</textarea>
<p/>
<div>
<button id="btn_save" disabled="disabled" onclick="sendword('textarea_words','div_tip')">Loading...</button>
<div id="progress"></div>
</div>

<div id="div_tip"> </div>

<hr />

<table width="500" border="0" id="table_datalist">
  
</table>
<p>&nbsp;</p>

<script language="javascript">


// div to show progress images
var div_progress = document.getElementById("progress");


// get timezone offset, use seconds as unit
tzoffset = new Date().getTimezoneOffset();
tzoffset = tzoffset * 60;



//pads left
String.prototype.lpad = function(padString, length) {
	var str = this;
    while (str.length < length)
        str = padString + str;
    return str;
}

// max length
String.prototype.maxlen = function(len){
	var str = this;
	if(str.length > len){
		str = str.substring(0,len) + "...";
	}
	return str;
}

// id = table_datalist
function newRow(id,data,time){
	var row = document.getElementById(id).insertRow(0);
	
	var cell_data = row.insertCell(0);
	var cell_tip = row.insertCell(1);
	cell_tip.className = "td_tip";
	cell_data.innerHTML = "<div>"+checkData(data)+"</div>";
	cell_tip.innerHTML = "<sub>"+time+"</sub>";
	
}

// rules:
// 1.) add link to url address
// 2.) fix length
function checkData(data){

	// 1.) 
	// find any string match: http://.... 
	data = data.replace(/http:[/][/][^\s]+/g, function(s){
		a = '<a href="' + s + '" target="_blank">' + s.maxlen(40) + '</a>';
		return a;
	});
	
	// 2.) fix length
	
	return data;
}





function sendword(id_word,id_result){
	document.getElementById("btn_save").disabled = "disabled"
	
	// get word and encode it
	var word = document.getElementById(id_word).value;
	// cut the word in pieces, 512byte
	var list_word = segment(word);
		
	var id = uuid();
	
	// display pending images
	
	setTimeout(function(){displayPending(list_word.length);},1);
	
	

	
	// send 	
	setTimeout(function(){sendWordImg(list_word, id);},1000);
}


function sendWordImg(list_word,id){
	for(var i=0;i<list_word.length;i++){
		var obj_param = {};
		obj_param["id"] = id;
		obj_param["sq"] = i;
		obj_param["to"] = list_word.length;
		obj_param["ct"] = list_word[i];
		obj_param["tzoffset"] = tzoffset;
		var url = Ajax.urlParam("/store/getimg",obj_param);
		document.getElementById(list_word.length+"_"+i).src = url;
	}
	document.getElementById("textarea_words").value = "";
	document.getElementById("btn_save").innerHTML = "Refresh";
	document.getElementById("btn_save").disabled = ""
	document.getElementById("btn_save").onclick = function(){
		document.getElementById("btn_save").disabled = "disabled";
		refreshDataWithAjax(id);
	}
}

function displayPending(size){
	for(var i=0;i<size;i++){
		var newimg = document.createElement("img");	
		newimg.setAttribute("id",size+"_"+i);
		newimg.setAttribute("src","/static/image/pending.png");
		div_progress.appendChild(newimg);
	}
}


function sendWordInSegment(list_word,id){
	
	if(list_word.length ==1 ){
		// refersh data list
		obj_param = {};
		obj_param["id"] = id;
		obj_param["sq"] = list_word.length;
		obj_param["ct"] = list_word.pop();
		obj_param["op"] = "end";
		obj_param["tzoffset"] = tzoffset;
		
		Ajax.sendGET("/store/receive",obj_param,
			function(resp){
				refreshDataList(resp);
			},
			function(errcode){},
			function(){}, 
			true);
		
		return;
	}
	
	obj_param = {};
	obj_param["id"] = id;
	obj_param["sq"] = list_word.length;
	obj_param["ct"] = list_word.pop();
	obj_param["tzoffset"] = tzoffset;
	
	Ajax.sendGET("/store/receive",obj_param,
		function(resp){
			sendWordInSegment(list_word,id);
		},
		function(errcode){},
		function(){}, 
		true);

}


function refreshDataWithAjax(dataId){
	Ajax.sendGET("/store/listdata",{"op":"build","id":dataId,"tzoffset":tzoffset},
		function(resp){
			var dataList = eval(resp);
			for(var i in dataList){
				newRow("table_datalist",dataList[i].ct,dataList[i].dt);
			}
			// enable button
			document.getElementById("textarea_words").disabled = "";
			document.getElementById("textarea_words").innerHTML = "";
			document.getElementById("btn_save").disabled = "";
			document.getElementById("btn_save").innerHTML = "Save";
			document.getElementById("btn_save").onclick = function(){sendword('textarea_words','div_tip');};			
			div_progress.innerHTML = "";
		},
		function(errcode){
			document.getElementById("div_tip").innerHTML = "Failed to load data list: "+errcode;
		},
		function(){}, 
		true);

}

function refreshDataList(resp){

	var dataList = eval(resp);
			
	for(var i in dataList){
		newRow("table_datalist",dataList[i].ct,dataList[i].dt);
	}

	document.getElementById("textarea_words").disabled = "";
	document.getElementById("textarea_words").value = "";
	document.getElementById("btn_save").disabled = "";
	document.getElementById("btn_save").innerHTML = "Save";
}

function uuid() {
    var S4 = function() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    };
    return (S4()+S4());
}

function segment(word){
	// cut the word in pieces, 512byte
	var strlen = word.length;
	var len = 0;
	var WC = 512;
	
	var times = strlen/WC;
	
	if(strlen%WC != 0){
		times =  Math.round(strlen/WC + 0.5);
	}
	
	var list_word = [];
	for(var i=0;i<times;i++){
		list_word.push(word.slice(len,len+WC));
		len = len + WC;
	}
	return list_word;
}


// load data list
Ajax.sendGET("/store/listdata",{"op":"build","tzoffset":tzoffset},
		function(resp){
			var dataList = eval(resp);
			for(var i in dataList){
				newRow("table_datalist",dataList[i].ct,dataList[i].dt);
			}
			// enable button
			document.getElementById("textarea_words").disabled = "";
			document.getElementById("textarea_words").innerHTML = "";
			document.getElementById("btn_save").disabled = "";
			document.getElementById("btn_save").innerHTML = "Save";
		},
		function(errcode){
			document.getElementById("div_tip").innerHTML = "Failed to load data list: "+errcode;
		},
		function(){}, 
		true);




</script>
</body>
</html>
